<template>
  <div id="song-list-detail" class="w">
    <!-- 顶部歌单描述 -->
    <Topdesc :playlist="playlist" @playAllSongs="playAllSongs" :isSub="isSub" @subSongListBy="subSongListBy"/>
    <!-- 底部歌曲 -->
    <div class="bot-song-list">
      <el-tabs>
        <!-- 歌曲列表 -->
        <el-tab-pane label="歌曲列表">
            <SongTable :songs="songs"/>
        </el-tab-pane>
        <!-- 歌单评论 -->
        <el-tab-pane label="评论">
            222
        </el-tab-pane>
        <!-- 收藏者 -->
        <el-tab-pane label="收藏者">
            333
        </el-tab-pane>
       
      </el-tabs>
    </div>
  </div>
</template>
<script>
// 歌单详情组件
import Topdesc from "./Childcomps/Topdesc.vue";
import { mapState } from "vuex";
// 歌曲列表组件
import SongTable from "@/components/content/SongTable.vue"
export default {
  inject: ["reload"],
  name: "",
  components: { Topdesc,SongTable },
  data() {
    return {
      id: "", // 存储路由传递过来歌单的id
      playlist: {}, // 存储歌单信息
      songids:"",// 歌单中所有歌曲的id,有一个接口
      // 歌单中歌曲的详细信息
      songs:[],
      isSub: false, //是否收藏了当前歌单

    };
  },
  created() {
    // 根据路由中的歌单id获取歌单信息
    this.id = this.$route.params.id
    // 发送请求根据id获取对应的歌单信息
    this.getSongListDetailById();
    // 判断用户歌单中是否有该歌单
    this.isSubSongList();
  },
  methods: {
    // 根据歌单id 获取歌单详情信息
    async getSongListDetailById(){
       let result = await this.$API.songlistdetail.getSongListDetail(this.id);
       if(result.code == 200){
            // 保存歌单的详细信息
            this.playlist = result.playlist;
            // 将歌单中的歌曲的id存储为一个字符串
            if(this.playlist.trackIds.length > 1000){
                // 先获取前500首收藏的歌曲
                this.playlist.trackIds.slice(0,500).forEach(item =>{
                    this.songids += item.id + ","
                })
            }else{
                this.playlist.trackIds.slice(0,500).forEach(item =>{
                    this.songids += item.id + "," 
                })
            }
            // 获取歌曲id字符串
            let queryids = this.songids.substr(0, this.songids.length - 1);
            let resultSong = await this.$API.songlistdetail.getEverySongDetail(queryids);
            if(resultSong.code == 200){
              this.songs = resultSong.songs
            }
       }else{
        this.$message({
            type:'error',
            message:'获取歌单详情失败'
        })
       }
    },
    // 播放当前歌单的全部歌曲
    async playAllSongs(){
        // 将当前歌单中的歌曲保存到播放列表中
        this.$store.dispatch('addAllSong',this.songs);
        // 默认播放第一首
        // 先判断当前的歌是否可以
        let isCheck = await this.$API.playmusic.checkMusic(this.songs[0].id);
        if(isCheck.success){
          // 根据歌曲的id,获取歌曲的详情
          let songMessage = await this.$API.playmusic.getSongUrl(this.songs[0].id);
          if(songMessage.code == 200){
             // 将歌曲的url存储在仓库
                this.$store.dispatch('saveSongUrl',songMessage.data[0].url);
                // 更新播放状态
                this.$store.dispatch('changePlayState',true);
                // 提交vuex保存当前歌曲的详情
                this.$store.dispatch('saveSongDetail',this.songs[0]);
          }
        }
    },
    isSubSongList(){
      // 查找用户歌单是否有当前歌单
      let index = this.userSongList.findIndex(item =>{
        return item.id == this.id
      });
      if(index == -1){
        // 如果没有返回false
        this.isSub = false
      }else{
        // 否则返回true
        this.isSub = true
      }
    },
    async subSongListBy(){
      let t = !this.isSub ? 1 : 2; // 1 为收藏,2为取消收藏
     
        // 发送网络请求收藏、取消收藏歌单
        let result =  await this.$API.songlistdetail.subSongList(t,this.id);
        if(result.code == 200){
          this.isSub = !this.isSub;
          // 重新获取用户的歌单
          let res = await this.$API.userdetail.getUserSongList(this.userInfo.userId);
          this.setItem("userSongList", res.playlist);
          this.$store.dispatch("saveUserSongList", res.playlist);
          if (t == 1) {
            this.$message({
              type: "success",
              message: "收藏成功"
            });
          } else {
            this.$message({
              type: "success",
              message: "取消收藏成功"
            });
          }
        }
    }
  },
  
  computed: {
    ...mapState({
      userSongList: (state) => {
        return state.userSong.userSongList;
      },
      // 获取用户信息
      userInfo: (state) => {
        return state.login.userInfo;
      },
    }),
  },
  watch:{
    // 监听路由的变化，如果发生改变则重新加载页面
    $route(to, from) {
			if (to !== from) {
				this.reload();
			}
		},
  }
};
</script>
<style lang="less" scoped>
#song-list-detail {
  margin-left: 10px;
}
</style>